<!-- 网站设置 -->
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
      <p class="title-label">网站设置</p>

      <div class="mt20 sdfgdgdfyt">
          <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left">
              <n-grid :cols="24" :x-gap="20">
                  <n-form-item-gi span="12" label="网页标题:" path="" class="mt20">
                      <n-input v-model:value="formValue.title" type="text" placeholder="请输入网页标题" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="12" label="网址:" path="" class="mt20">
                      <n-input v-model:value="formValue.url" type="text" placeholder="请输入网址" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="公司名称:" path="" class="mt20">
                      <n-input v-model:value="formValue.companyName" type="text" placeholder="请输入公司名称" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>


                  <n-form-item-gi span="7" label="LOGO:" path="" class="mt20">
                      <div class="logo-context vertical-center pr" @click="photoShowModal = true">
                          <img :src="formValue.logo" class="w100 h100 imgjz" v-if="formValue.logo" />
                          <span v-else>点击上传LOGO</span>
                          <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.logo" @click.stop="formValue.logo=''"> </i>
                   
                      </div>
                  </n-form-item-gi>
                  <n-form-item-gi span="7" label="深色LOGO:" path="" class="mt20">
                      <div class="logo-context vertical-center pr" @click="photoShowModalc = true">
                          <img :src="formValue.logose" class="w100 h100 imgjz" v-if="formValue.logose" />
                          <span v-else>点击上传LOGO</span>
                          <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.logose" @click.stop="formValue.logose=''"> </i>
                   
                      </div>
                  </n-form-item-gi>
                  <n-form-item-gi span="7" label="底部logo:" path="" class="mt20">
                      <div class="logo-context vertical-center pr" @click="photoShowModaldb = true">
                          <img :src="formValue.btlogo" class="w100 h100 imgjz" v-if="formValue.btlogo" />
                          <span v-else>点击上传LOGO</span>
                          <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.btlogo" @click.stop="formValue.btlogo=''"> </i>
                   
                      </div>
                  </n-form-item-gi>
                  <n-form-item-gi span="3" label="企业二维码:" path="" class="mt20">
                      <div class="logo-context ab vertical-center pr" @click="photoShowModaler = true">
                          <img :src="formValue.qrcode" class="w100 h100 imgjz" v-if="formValue.qrcode" />
                          <span v-else>点击上传企业二维码</span>
                          <i class="iconfont dx-closefill sdfddfsrtxer" v-if="formValue.qrcode" @click.stop="formValue.qrcode=''"> </i>
                   
                      </div>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="SEO 关键词:" path="" class="mt20">
                      <n-input v-model:value="formValue.keywords" type="text" placeholder="例如：关键词，关键词，关键词" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="SEO 描述:" path="" class="mt20">
                      <n-input type="textarea" v-model:value="formValue.description"
                          placeholder="一段通顺的话，例如：XX公司是一家专业的XX公司，专业生产和销售关键词，关键词，关键词等商品和服务，联系电话：XXXX。" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>

                  <n-form-item-gi span="24" label="域名备案号:" path="" class="mt20">
                      <n-input v-model:value="formValue.bah" type="text" placeholder="请输入域名备案号" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>

                  <n-form-item-gi span="8" label="联系电话:" path="" class="mt20">
                      <n-input v-model:value="formValue.phone" type="text" placeholder="请输入联系电话" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="8" label="qq:" path="" class="mt20">
                      <n-input v-model:value="formValue.qq" type="text" placeholder="请输入qq" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="8" label="企业邮箱:" path="" class="mt20">
                      <n-input v-model:value="formValue.email" type="text" placeholder="请输入企业邮箱" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="联系地址:" path="" class="mt20">
                      <n-input v-model:value="formValue.contactAddress" type="text" placeholder="请输入联系地址" size="medium"
                          clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="公司简介:" path="" class="mt20">
                      <n-input type="textarea" v-model:value="formValue.companyProfile" placeholder="公司简介" size="medium"
                          :autosize="{ minRows: 6 }" clearable></n-input>
                  </n-form-item-gi>
                  <n-form-item-gi span="24" label="网站HTML代码:" path="" class="mt20">
                      <n-input type="textarea" v-model:value="formValue.htmlCode" placeholder="如：网站统计代码等" size="medium"
                          :autosize="{ minRows: 6 }" clearable></n-input>
                  </n-form-item-gi>


              </n-grid>
          </n-form>

      </div>

   


      <div class="jkjnjmxertw  vertical-center">
          <n-button type="primary" size="medium" @click="saveFun">保存</n-button>

      </div>
      <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
          <template #header>
              <div>logo</div>
          </template>
          <div>
              <photoGallery @getImg="getImg" :types="'dxlogo' + Userid"></photoGallery>
          </div>
          <template #action>
              <div class="tr">
                  <n-button @click="photoShowModal = false"> 取消 </n-button>
                  <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
              </div>
          </template>
      </n-modal>



      <n-modal v-model:show="photoShowModaldb" preset="card" class="Stock-diagnosis">
          <template #header>
              <div>底部logo</div>
          </template>
          <div>
              <photoGallery @getImg="getImgbt" :types="'dxlogo' + Userid"></photoGallery>
          </div>
          <template #action>
              <div class="tr">
                  <n-button @click="photoShowModaldb = false"> 取消 </n-button>
                  <n-button class="ml10" type="info" @click="setImgbt"> 确定 </n-button>
              </div>
          </template>
      </n-modal>

      <n-modal v-model:show="photoShowModalc" preset="card" class="Stock-diagnosis">
          <template #header>
              <div>选中交互logo</div>
          </template>
          <div>
              <photoGallery @getImg="getImgct" :types="'dxlogo' + Userid"></photoGallery>
          </div>
          <template #action>
              <div class="tr">
                  <n-button @click="photoShowModalc = false"> 取消 </n-button>
                  <n-button class="ml10" type="info" @click="setImgct"> 确定 </n-button>
              </div>
          </template>
      </n-modal>
      

      <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
          <template #header>
              <div>企业二维码</div>
          </template>
          <div>
              <photoGallery @getImg="getImger" :types="'企业二维码' + Userid"></photoGallery>
          </div>
          <template #action>
              <div class="tr">
                  <n-button @click="photoShowModaler = false"> 取消 </n-button>
                  <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
              </div>
          </template>
      </n-modal>




  </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
const photoShowModal = ref(false)
const photoShowModaldb = ref(false)
const photoShowModalc = ref(false)
const photoShowModaler = ref(false)
const apiurl = 'dxgjAdmin/dxglobalSetting'
const isbj = ref(false) // 是否为编辑的状态
let bjid = 0
const Userid = ref(localStorage.Userid)
const props = defineProps({
    lang: { type: String},
});

const formValue = ref({
  title: "",
  url:"",
  companyName: "",
  htmlCode: "",
  logo: "",
  logose:"",
  btlogo:"",
  qrcode:"",
  keywords: "",
  description: "",
  bah: "",
  phone:"",
  email:"",
  contactAddress:"",
  companyProfile:"",
  qq:""
})

let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  formValue.value.logo = jjnmnxe;
  photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
  jjnmnxeer = data;
};
const setImger = () => {
  formValue.value.qrcode = jjnmnxeer;
  photoShowModaler.value = false;
};

let jjnmnxebt = "";
const getImgbt = (data) => {
  jjnmnxebt = data;
};
const setImgbt = () => {
  formValue.value.btlogo = jjnmnxebt;
  photoShowModaldb.value = false;
};

let jjnmnxect = "";
const getImgct = (data) => {
  jjnmnxect = data;
};
const setImgct = () => {
  formValue.value.logose = jjnmnxect;
  photoShowModalc.value = false;
};





const initData = async () => {
  const { data }: any = await dxget(apiurl, { sxname: "Webpagesetup", roleId: localStorage.id,lang:props.lang })
  if (data.length <= 0) {
      return
  }
  isbj.value = true
  bjid = data[0].id
  const dataw = JSON.parse(data[0].text)
  if (dataw.title) {
      formValue.value.title = dataw.title
  }
  if (dataw.url) {
      formValue.value.url = dataw.url
  }
  
  if (dataw.companyName) {
      formValue.value.companyName = dataw.companyName
  }
  if (dataw.logo) {
      formValue.value.logo = dataw.logo
  }
  if (dataw.logose) {
      formValue.value.logose = dataw.logose
  }
  
  if (dataw.btlogo) {
      formValue.value.btlogo = dataw.btlogo
  }
  
  if (dataw.qrcode) {
      formValue.value.qrcode = dataw.qrcode
  }
  
  if (dataw.keywords) {
      formValue.value.keywords = dataw.keywords
  }
  if (dataw.description) {
      formValue.value.description = dataw.description
  }
  if (dataw.bah) {
      formValue.value.bah = dataw.bah
  }

  if (dataw.phone) {
      formValue.value.phone = dataw.phone
  }

  if (dataw.email) {
      formValue.value.email = dataw.email
  }
  if (dataw.contactAddress) {
      formValue.value.contactAddress = dataw.contactAddress
  }
  if (dataw.qq) {
      formValue.value.qq = dataw.qq
  }
  if (dataw.companyProfile) {
      formValue.value.companyProfile = dataw.companyProfile
  }

  
  
  if (dataw.htmlCode) {
      formValue.value.htmlCode = dataw.htmlCode
  }
}
initData()
const saveFun = async () => {
  if (!isbj.value) {
      const { errno }: any = await dxpost(apiurl, { sxname: "Webpagesetup", roleId: localStorage.id, text: JSON.stringify(formValue.value),lang:props.lang })
      if (errno == 0) {
          window.$message.success('操作成功！')
          return
      }
  } else {
      const { errno }: any = await dxpost(apiurl, { id: bjid, text: JSON.stringify(formValue.value),lang:props.lang }, 'put')
      if (errno == 0) {
          window.$message.success('保存成功！')
      }
  }

}
</script>
<style scoped>
.dfgfdgtrt {
  overflow: auto;
  padding-bottom: 80px;
}

.sdfgdgdfyt {
  width: 1200px;
}

.logo-context {
  border: 1px dashed #999;
  width: 250px;
  height: 100px;
  text-align: center;
  color: #999;
  cursor: pointer;
  background: #e0e0e0;
}

.logo-context.ab {
  width: 94px;
  height: 94px;
}

.logo-context.ac {
  width: 600px;
  height: 300px;
}

</style>